<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 左边 -->
        <!-- 下拉树 组件 -->
        <TreeNodeTool :tree-node="company">
          <!-- 默认插槽 内容 -->
          <el-dropdown-item
            :disabled="checkPermission('add-dept')"
            @click.native="onAddMaster(company)"
          >添加子部门</el-dropdown-item>
        </TreeNodeTool>
        <el-tree default-expand-all :data="departs" :props="defaultProps">
          <!-- 下拉树 组件 -->
          <TreeNodeTool slot-scope="{data}" :tree-node="data">
            <!-- 默认插槽 内容 -->
            <el-dropdown-item
              :disabled="checkPermission('add-dept')"
              @click.native="onDepartsAdd(data)"
            >添加子部门</el-dropdown-item>
            <el-dropdown-item
              @click.native="onDepartsEdit(data)"
            >编辑部门</el-dropdown-item>
            <el-dropdown-item @click.native="onDepartsDel(data)">删除部门</el-dropdown-item>
          </TreeNodeTool>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加部门弹层 组件 -->
    <AddDept ref="AddDeptRef" :my-add-dept-show="addDeptShow" :tree-node="node" @addDepts="getDepartsList()" @myoff="addDeptShow=false" />
  </div>
</template>

<script>
import TreeNodeTool from './components/TreeNodeTool'
import AddDept from './components/AddDept'

import { delDepartmnetAPI, getDepartmentsAPI } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeNodeTool,
    AddDept
  },
  props: {},
  data() {
    return {
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      addDeptShow: false, // 增加部门弹层
      node: null // 当前操作的部门
    }
  },
  created() {
    this.getDepartsList()
  },
  mounted() {},
  methods: {
    // 获得部门列表
    async getDepartsList() {
      const { depts, companyName } = await getDepartmentsAPI()
      this.company.name = companyName
      this.departs = tranListToTreeData(depts, '')
    },
    // 删除部门
    onDepartsDel(node) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delDepartmnetAPI(node.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新列表
        this.getDepartsList()
      }).catch((e) => {
        if (e === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
    },
    // 编辑部门
    async onDepartsEdit(data) {
      // 调用子组件方法,回流数据,打开页面的数据
      this.$refs.AddDeptRef.getDepartmnetByid(data.id)
      this.addDeptShow = true // 打开弹层
      this.node = data // 保存节点信息
    },
    // 添加部门按钮.显示弹层
    onDepartsAdd(data) {
      this.addDeptShow = true
      this.node = data
      console.log('fu', this.node)
    },
    // 添加第一层部门
    onAddMaster(m) {
      console.log(m)
      this.addDeptShow = true
      this.node = m
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
